<template>
    <div class="typeselect">
        <div class="title">
            {{label}}
        </div>
        <div class="select_con">
            <div :class="item.valueid == activeValue ? 'active' : 'select_con_item'" v-for="(item,index) in newtypeList" :key="index" @click="handleClick(item)">{{item.valuename}} </div>
        </div>
    </div>
</template>

<script>



export default {
    props:{
        label:{
            type:String,
            default:'',
        },
        typeList:{
            type:Array,
            default:(() =>[])
        },
        activeValue:{
            type: String,
            default:'',
        }
    },  
    components: {

    },
    async asyncData(context) {},
    data() {
        return {

        };
    },
    computed: {
        newtypeList:function(){
            return this.typeList.map((item)=>{
                return {
                    ...item,
                    isselect:false
                }
            })
        }
    },

    watch:{
       
    },

    methods: {
        handleClick:function(val){
            this.$emit('setType',val);
        }


    },
    created() {},
    mounted() {

    },
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.typeselect{
    display: flex;
    .title{
        margin-top: 7px;
        padding-top: 6px;
        min-width: 70px;
        font-weight: 800;
    }
    .select_con{
        display: flex;
        align-content:flex-start;
        flex-wrap: wrap;

        .select_con_item{
            cursor: pointer;
            padding: 6px;
            margin-right: 6px;
            margin-top: 7px;  
        }

        .active{
            cursor: pointer;
            padding: 6px;
            margin-right: 6px;
            margin-top: 7px;
            background-color: $primaryColor;  
            color: white;
        }
        div:hover{
            background-color: $primaryColor;  
            color: white;
        }
    }
}
</style>
